<template>
    <div class="wrapper" @click="cancel($event)">
        <!-- 顶部图片 -->
        <TopImg />
        <!-- 搜索组件 -->
        <Column :show="show" :name="cityName" />

        <MainInner />

        <!-- 选择城市 -->
        <div class="dialog-con" v-show="isShow">
            <div class="dialog-mar">
                <p class="choose" style="font-weight: lighter">请选择城市</p>
                <span class="iconfont icon-chacha" @click="close"></span>
                <div style="clear: both"></div>
            </div>
            <div style="clear: both"></div>
            <ul class="section-province">
                <li class="active">热门城市</li>
                <li>ABCDE</li>
                <li>FGHJ</li>
                <li>KLMN</li>
                <li>PQRST</li>
                <li>WXYZ</li>
                <div style="clear: both"></div>
            </ul>
            <ul class="section-city">
                <li v-for="hotCity in city.zpData" :key="hotCity.id">
                    <span @click="cityBtn(hotCity.name)">{{ hotCity.name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
// 引入组件
import TopImg from './TopImg/TopImg.vue';
import Column from './Column/Column.vue';
import MainInner from './MainInner/index.vue';
// 引入字体图标样式
import "./font/iconfont.css"

// 引入热门城市数据
import { reqGetHotCity } from "@/zwapi/index.js"

export default {
    name: "ZTurtles",
    components: {
        TopImg,
        Column,
        MainInner
    },
    data() {
        return {
            // 选择城市弹框是否显示
            isShow: false,
            // 热门城市数据
            city: {},
            // 搜索框的城市名字
            cityName: "全国",
        }
    },
    methods: {
        // 显示热门城市弹框
        show() {
            this.isShow = true
        },
        // 关闭热门城市弹框
        close() {
            this.isShow = false
        },
        // 点击获取被点击的城市名字
        cityBtn(name) {
            this.csname = name
            this.isShow = false
        },
        // 点击除开热门城市弹框之外的位置关闭弹框
        cancel(event) {
            let close = document.querySelector(".dialog-con")
            if (close) {
                if (!close.contains(event.target)) {
                    this.isShow = false
                }
            }
        }
    },
    async mounted() {
        this.city = await reqGetHotCity();
    }
}
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;
    background-color: #f6f6f8;
    position: relative;

    .dialog-con {
        width: 786px;
        height: 527px;
        background-color: #fff;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-left: -393px;
        margin-top: -263.5px;

        .dialog-mar {
            width: 756px;
            height: 70px;
            float: right;

            .choose {
                font-size: 16px;
                float: left;
                line-height: 70px;
                font-weight: lighter;
            }

            span {
                width: 25px;
                height: 25px;
                font-size: 16px;
                text-align: center;
                margin-top: 10px;
                line-height: 25px;
                margin-right: 10px;
                float: right;
                cursor: pointer;
                color: #414a60;

                &:hover {
                    background-color: #b9b9b9;
                    transition: all linear 0.5s;
                }
            }
        }

        .section-province {
            height: 39px;
            background-color: pink;

            li {
                width: 131px;
                height: 100%;
                background-color: #f9fafb;
                font-size: 14px;
                color: #424a5e;
                text-align: center;
                line-height: 39px;
                float: left;
                cursor: pointer;

                .active {
                    color: #5dd5c8;
                    border-bottom: 1px solid #5dd5c8;
                }

                &:hover {
                    color: #5dd5c8;
                }
            }
        }

        .section-city {
            display: flex;
            flex-wrap: wrap;
            padding: 20px 0;

            li {
                width: 20%;
                height: 40px;
                text-align: center;
                margin-bottom: 8px;

                span {
                    font-size: 14px;
                    color: #424a5e;
                    cursor: pointer;

                    &:hover {
                        color: #5dd5c8;
                    }
                }
            }
        }
    }
}
</style>